import React from "react"
import { NavBar, Icon } from 'antd-mobile';
import {get_song_pinglun,send_pinglun} from "../../../api"
import queryString from "query-string"

class Playmusic_pinglun extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      comments:[],
      inputValue:"",
    }
  }

  componentDidMount(){
    console.log(this.props)
    let qr = queryString.parse(this.props.location.search)
    console.log(qr)
    get_song_pinglun(qr.id)
    .then(body=>body.json())
    .then(res=>{
      console.log(res);
        this.setState({
          // comments:res.hotComments
          comments:res.comments,
          // pinglun_total:res.total
      })
      // console.log(this.state.comments);
    })
  }

  goback(props){
    this.props.history.goBack()
    // console.log(222)
  }

  inputpinglun(e){
    // console.log(e.target.value)
    this.setState({
      inputValue:e.target.value
    })
  }
  sendPinglun(){
    // console.log(this.state.inputValue)
    let qr = queryString.parse(this.props.location.search)
    console.log(qr)
    send_pinglun(qr.id,this.state.inputValue)
    .then(body=>body.json())
    .then(res=>{
      console.log(res);
        this.setState({
          inputValue:""
      })
      // console.log(this.state.comments);
    })
  }

  render(){
    return (
      <div className="Playmusic_pinglun">
        <NavBar
              style={{backGround:'white'}}
              mode="dark"
              icon={<Icon type="left"  onClick={this.goback.bind(this)} style={{width:"30px",height:"30px",zIndex:2}}/>}

            >热门评论
        </NavBar>

        <ul style={{paddingLeft:"10px"}}>
          {this.state.comments.map((item,index)=><li key={index} style={{marginBottom:"20px"}}>
            <div>
              <div style={{display:"flex",alignItems:"center"}}>
                <img src={item.user.avatarUrl} alt="" style={{width:"30px",height:"30px"}}/>
                <span>{item.user.nickname}</span>
              </div>
              <span>{item.content}</span>
            </div>
            <div></div>
          </li>)}
        </ul>

        <div style={{width:"100%",height:"30px"}}>
        <div style={{position:"fixed",bottom:"0",width:"100%"}}>
          <input type="text" 
          placeholder="这一次也许就是你上热评了"
          style={{width:"80%",padding:"0",height:"30px"}} 
          onChange={this.inputpinglun.bind(this)} 
          value={this.state.inputValue}></input>
          <button style={{width:"18%",padding:"0",height:"30px"}} 
            onClick={this.sendPinglun.bind(this)}>发送
          </button>
        </div>
        </div>


        
      </div>
    )
  }
}

export default Playmusic_pinglun